import { useStore, useState } from "openinula";
import { applicationStore } from "@/store";
import { Button, Form, Modal, Space,message, InputNumber } from "antd";

export default function TwoPage() {
  const store = useStore('application');
  const [form] = Form.useForm();
  const [numModal, setNumModal] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();

  const handleAddOne = () => {
    store.$a.plusOne();
  }

  const handleOk = () => {
    const value = form.getFieldsValue().applicationCount;
    if(value){
      if(Number.isInteger(value)){
        store.$a.plusValue(value);
        setNumModal(false);
        messageApi.success('增加成功');
      }else{
        messageApi.error('数据输入不合法')
      }
    }else{
      messageApi.warning('输入不为空');
    }
  }

  const handleCancel = () => {
    setNumModal(false)
  }

  return <div>
    {contextHolder}
    <p>inula-X</p>
    <p>{store.$s.name}拥有的应用数量为：{store.$s.count}</p>
    <Space>
      <Button onClick={handleAddOne} type="primary">增加应用数量1</Button> 
      <Button onClick={() => setNumModal(true)}>自定义增加数量</Button>
    </Space>
    <Modal open={numModal} title="增加应用数量" onOk={handleOk} onCancel={handleCancel} okText='确认' cancelText='取消'>
      <Form form={form} style={{ marginTop: '20px' }}>
        <Form.Item label="应用数量" name="applicationCount" rules={[{ required: true, message: '请输入数量' }]} >
          <InputNumber style={{width:'100%'}} placeholder="请填写应用数量" />
        </Form.Item>
      </Form>
    </Modal>
  </div>
}